<!-- 参团列表 -->
<template>
	<view>
		<view class="goods_groupbuy bgwhite m-bot20" v-if='groupData'>
			<view class="goods_groupbuy_h flex-box flex-between align-center">
				<text class="color_22">{{groupData.length}}人已发起团购，可直接参团</text>
				<view class="flex-box align-center" @click="showMore=true">
					<text class="color_99 m-right10">查看更多</text>
					<text class='iconfont icon-xiangyouxiayiye h6 color_99'></text>
				</view>
			</view>
			<view class="goods_groupbuy_list">
				<swiper :style="{height: groupData.length > 1 ? '200rpx' : '100rpx'}" circular vertical autoplay :interval="3000" :duration="1000"
					:display-multiple-items="groupData.length > 1 ? 2 : 1">
					<swiper-item v-for='(group,gid) in groupData' :key='gid'>
						<view class="flex-box flex-between align-center height">
							<u-avatar-group :urls="group.groupUsers" keyName="v_headimg" size="30" maxCount="5" gap="0.2"></u-avatar-group>
							<view class="flex-box align-center">
								<view class="text-right">
									<view class="color_44">还差<text class="color_DE bold">{{group.missPeople}}</text>人成团</view>
									<view class="color_44">
										剩余<counTime :time="group.gameOver"></counTime>
									</view>
								</view>
								<view @click='toOrderList("/userPage/group/tuxedo?gid="+group.goods_id+"&group_id="+group.group_id+"&aid="+group.act_id)'
									class="joinBtn bgDE">去参团</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view v-if='showMore' class="mask flex-box align-center" @click="showMore=false">
			<view>
				<view class="moreList" @click.stop>
					<view class="moreListTitle size32 color_22 bold text-center bot_bor_ee">正在团购</view>
					<view class="peopleList">
						<view class="m-bot20" v-for='(group,gid) in groupData' :key='gid'>
							<view class="flex-box flex-between align-center" style="height: 100rpx">
								<u-avatar-group :urls="group.groupUsers" keyName="v_headimg" size="30" maxCount="4" gap="0.2"></u-avatar-group>
								<view class="flex-box align-center">
									<view class="text-right">
										<view class="color_44">还差<text class="color_DE bold">{{group.missPeople}}</text>人成团</view>
										<view class="color_44">
											剩余<counTime :time="group.gameOver"></counTime>
										</view>
									</view>
									<view @click='toOrderList("/userPage/group/tuxedo?gid="+group.goods_id+"&group_id="+group.group_id+"&aid="+group.act_id)'
								 		class="joinBtn bgDE">去参团</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<text class="iconfont icon-guanbi size42" @click="showMore=false"></text>
			</view>
		</view>
		<showModel @cancelFunc='cancelFunc' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	import Count from './count-down/count-down.vue'
	export default {
		props: ['groupData'],
		components:{
			counTime: Count
		},
		data() {
			return {
				color: getApp().globalData.color,
				showModal:false,
				showMore: false ,// 查看更多
				// groupData:['']
			}
		},
		created() {
			console.log(this.groupData)
		},
		methods:{
			cancelFunc(){
			    this.showModal = false;
			},
			toOrderList: function(url) {
				var that = this;
				var vid = uni.getStorageSync("vid")
				if (!vid) {
					that.showModal = true;
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
		}
	}
</script>

<style scoped>
	.goods_groupbuy .goods_groupbuy_h {
		height: 80rpx;
		border-bottom: 1px solid #eeeeee;
		padding: 0 40rpx;
	}
	.goods_groupbuy .goods_groupbuy_list {
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 0 40rpx;
	}
	.joinBtn{
		width: 130rpx;
		line-height: 54rpx;
		border-radius: 8rpx;
		font-size: 26rpx;	
		color: #FAFBFF;
		text-align: center;
		margin-left: 20rpx;
	}
	.mask{justify-content: center;}
	.moreList{
		width: 650rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
	}
	.moreListTitle{
		line-height: 88rpx;
	}
	.peopleList{
		padding: 30rpx;
		max-height: 66vh;
		overflow-y: auto;
	}
	.icon-guanbi{
		display: block!important;
		margin: 30rpx auto 0; 
		text-align: center;
	}
</style>